<template>
  <div class="store-container vip3">
    <div class="store-sign yh-layout-box" v-if="signBoard">
      <img :src="URL.PIC+signBoard" width="100%" height="108">
    </div>
    <!--导航-->
    <NavList index="index" v-if="info && goodsClassify" :factoryId="info.id" :classify="goodsClassify" tplVip="vip3"/>
    <!--公用banner-->
    <div class="store-swiperBanner" v-if="banners && banners.length > 0">
      <Carousel :banners="banners" />
    </div>
    <!--统计信息-->
    <Xlist />

    <!--热卖推荐-->
    <!--<hot-sale :sellWell="sellWell" :getFactoryId="factoryId"></hot-sale>-->
    <!--热销商品--> 
    <div class="tpl3-hots">
       <div class="tpl3-hots-content">
         <el-carousel :interval="5000" arrow="never">
           <el-carousel-item v-for="(item,index) in sellWell" :key="index">
             <div class="item" v-for="goods in item">
                <div class="item-image relative" @click="routeToPath('/product/'+goods.productId, 'new')">
                  <a href="javascript:void(0)">
                    <img v-bind:src="URL.PIC+goods.mainImgPath" alt="">
                    <span class="hots-dark-bg">{{goods.title}}</span>
                  </a>
                  <span class="go-buying"></span>

                </div>
             </div>
           </el-carousel-item>
         </el-carousel>
       </div>
    </div>
    <!--热销商品-->

    <!--店长推荐-->
    <div class="captain-recommend">
        <div class="captain-recommend-item" v-for="(item,index) in classifyCustom">
           <div class="captain-recommend-item-title relative">
             <div class="captain-recommend-title-bg"  :class="'option' + index">
               <div class="captain-recommend-title-text">{{ item.classifyName }}</div>
               <a href="javascript:void(0)"  @click="routeToPath('/product/list?factoryId='+ item.factoryId, 'new')" class="view-more">查看更多</a>
             </div>
           </div>
          <div class="captain-recommend-item-con"  v-for="good in item.goods" @click="routeToPath('/product/'+good.productId, 'new')">
            <div class="captain-recommend-item-img">
              <a href="javascript:void(0)"><img :src="URL.PIC+good.productImage" alt=""></a>
            </div>
            <p>￥{{ good.specification.sellingPrice }}</p>
            <div class="captain-recommend-item-con-text">{{ good.productTitle }}</div>
          </div>
          <div class="clear-option"></div>
        </div>

        <div class="about-us-info" v-if="info">
          <div class="about-us-info-text pull-right">
            <h3>关于我们 <span>About Us</span></h3>
            <p>{{ info.introduction}}</p>
          </div>
          <img src="../../../assets/images/factory/templates/vip2/level_15.png" alt="" class="about-us-info-img">
        </div>
    </div>
    <!---->
  </div>
</template>

<script>
  import Vue from 'vue';
  import NavList from '../components/NavListVip'
  import { getFactoryPromotion, getFactoryClassifyCustom, getFactoryProducts, getFactoryBannerSelect, getFactorySignBoard } from '@/api/factory'
  import Carousel from '../components/Carousel'
  import Xlist from '../components/Xlist'
  import hotSale from '../components/hot-sale'

  export default {
    props: ['info', 'goodsClassify'],
    components: {
      NavList,
      Carousel,
      Xlist,
      hotSale
    },
    data() {
      return {
        factoryId: this.$route.params.factoryId,
        sellWell: null,
        classifyCustom: [],
        classifyGoods: [],
        banners: null,
        signBoard: null,
        classIndex:0
      }
    },
    created() {
      this.getFactoryPromotion()
      this.getFactorySignBoard()
      this.getFactoryBannerSelect()
      this.getFactoryClassifyCustom()
    },
    methods: {
      // 店招
      getFactorySignBoard() {
        getFactorySignBoard({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
          this.signBoard = res.data;
        })
      },
      // BANNER
      getFactoryBannerSelect() {
        getFactoryBannerSelect({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
          this.banners = res.data;
        })
      },
      // 热销商品
      getFactoryPromotion() {
        getFactoryPromotion({factoryId: this.factoryId, positionCode: 'HOTS'}).then(res=>{

          //数据重新分组
          function group(array, subGroupLength) {
                 let index = 0;
                 let newArray = [];
                 while(index < array.length) {
                      newArray.push(array.slice(index, index += subGroupLength));
                   }
                 return newArray;
          }

          let groupedArray = group(res.data, 6);//设置每6个数据为一组 方便循环
          //console.log(groupedArray);

          this.sellWell = groupedArray;

        })
      },
      // 品类
      getFactoryClassifyCustom() {
        getFactoryClassifyCustom({factoryId: this.factoryId}).then(res=>{
          this.getFactoryProducts(res.data)

        })
      },
      // 品类商品
      getFactoryProducts(classifyCustom) {
        for (var idx in classifyCustom) {
          getFactoryProducts({factoryId: this.factoryId,
            classifyId: classifyCustom[idx].classifyId,
            size: 100,
            page: 1,
            sort: 'desc',
          }).then(res=>{
            this.classifyGoods.push(res.data.list)
            setTimeout(()=>{
              this.ProductsList(classifyCustom, this.classifyGoods)
            }, 5)
          })
        }
      },
      // 把品类和商品放在一个数组里面
      ProductsList(classifyCustom, classifyGoods) {
        for (var idx in classifyCustom) {
          classifyCustom[idx].goods = classifyGoods[idx]
        }
        this.classifyCustom = classifyCustom

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/pages/template.scss';
</style>
<style lang="css">
  @import "@/styles/pages/template-style.css";
</style>
<style>
  .tpl3-hots-content .el-carousel,.tpl3-hots-content .el-carousel__item{height:855px;}
  .tpl3-hots-content .el-carousel__item{background:none;}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .vip3.store-container{background:#5a01f1}
  .vip3.template-common-data-wrap{background:#1869f0}
  .vip3.template-common-data-wrap .class-goods{background:#fff}
</style>
